<template>
  <div class="singer-container">
    <!-- 轮播图区域 -->
    <div class="carousel-wrapper">
      <el-carousel height="250px">
        <el-carousel-item v-for="(item, index) in carouselSingers" :key="index">
          <img :src="item.avatar" alt="热门歌手" style="width: 100%; height: 100%; object-fit: cover;">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 新增按钮 -->
    <div class="action-button-container">
      <el-button
          type="primary"
          @click="showWelcomeDialog = true"
          class="welcome-btn"
      >
        <i class="el-icon-star-off"></i>
        点击查看歌手介绍
      </el-button>
    </div>

    <!-- 筛选标签区域 -->
    <div class="filter-tabs">
      <!-- 地区筛选 -->
      <el-radio-group v-model="areaFilter" size="small" @change="handleFilterChange">
        <el-radio label="all">全部</el-radio>
        <el-radio label="cn">内地</el-radio>
        <el-radio label="hkTw">港台</el-radio>
        <el-radio label="us">欧美</el-radio>
        <el-radio label="jp">日本</el-radio>
        <el-radio label="kr">韩国</el-radio>
      </el-radio-group>

      <!-- 性别/组合筛选 -->
      <el-radio-group v-model="genderFilter" size="small" class="ml-3" @change="handleFilterChange">
        <el-radio label="all">全部</el-radio>
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
        <el-radio label="group">组合</el-radio>
      </el-radio-group>

      <!-- 风格筛选 -->
      <el-radio-group v-model="styleFilter" size="small" class="ml-4" @change="handleFilterChange">
        <el-radio label="all">全部</el-radio>
        <el-radio label="pop">流行</el-radio>
        <el-radio label="rap">说唱</el-radio>
        <el-radio label="chinese">国风</el-radio>
        <el-radio label="rock">摇滚</el-radio>
        <el-radio label="electronic">电子</el-radio>
        <el-radio label="folk">民谣</el-radio>
        <el-radio label="rb">R&B</el-radio>
        <el-radio label="national">民族乐</el-radio>
        <el-radio label="light">轻音乐</el-radio>
        <el-radio label="jazz">爵士</el-radio>
        <el-radio label="classic">古典</el-radio>
        <el-radio label="country">乡村</el-radio>
        <el-radio label="blues">蓝调</el-radio>
      </el-radio-group>
    </div>

    <!-- 歌手列表区域 -->
    <div class="singer-list">
      <div
          class="singer-item"
          v-for="(singer, index) in filteredSingers"
          :key="index"
      >
        <el-avatar
            :src="singer.avatar"
            size="400"
            class="singer-avatar"
        />
        <div class="singer-name mt-2">{{ singer.name }}</div>
      </div>
    </div>

    <!-- 欢迎弹窗 -->
    <el-dialog
        v-model="showWelcomeDialog"
        title="欢迎来到歌手页面"
        width="500px"
        class="welcome-dialog"
    >
      <div class="dialog-content">
        <div class="dialog-icon">
          <i class="el-icon-microphone"></i>
        </div>
        <h3>发现您喜爱的歌手</h3>
        <p>在这里您可以浏览不同地区、不同风格的音乐艺术家</p>
        <p>使用上方筛选器快速找到您感兴趣的歌手</p>
        <p>点击歌手头像可以查看他们的详细信息</p>

        <div class="features">
          <div class="feature-item">
            <i class="el-icon-location"></i>
            <span>按地区筛选歌手</span>
          </div>
          <div class="feature-item">
            <i class="el-icon-user"></i>
            <span>按性别/组合筛选</span>
          </div>
          <div class="feature-item">
            <i class="el-icon-headset"></i>
            <span>按音乐风格筛选</span>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button type="primary" @click="showWelcomeDialog = false">
          开始探索
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Singer",
  data() {
    return {
      // 新增弹窗状态
      showWelcomeDialog: false,

      // 筛选条件
      areaFilter: "all",
      genderFilter: "all",
      styleFilter: "all",
      // 模拟歌手数据，实际可从接口获取
      singers: [
        {
          name: "周杰伦",
          avatar: "https://picsum.photos/120?random=1",
          area: "tw",
          gender: "male",
          style: "pop"
        },
        {
          name: "林俊杰",
          avatar: "https://picsum.photos/120?random=2",
          area: "tw",
          gender: "male",
          style: "pop"
        },
        {
          name: "陈奕迅",
          avatar: "https://picsum.photos/120?random=3",
          area: "hk",
          gender: "male",
          style: "pop"
        },
        {
          name: "薛之谦",
          avatar: "https://picsum.photos/120?random=4",
          area: "cn",
          gender: "male",
          style: "pop"
        },
        {
          name: "G.E.M.邓紫棋",
          avatar: "https://picsum.photos/120?random=5",
          area: "hk",
          gender: "female",
          style: "pop"
        },
        {
          name: "Taylor Swift",
          avatar: "https://picsum.photos/120?random=6",
          area: "us",
          gender: "female",
          style: "pop"
        },
        {
          name: "BTS",
          avatar: "https://picsum.photos/120?random=7",
          area: "kr",
          gender: "group",
          style: "pop"
        },
        {
          name: "米津玄師",
          avatar: "https://picsum.photos/120?random=8",
          area: "jp",
          gender: "male",
          style: "pop"
        }
      ],
      // 轮播图歌手数据，暂时模拟
      carouselSingers: [
        { avatar: "https://picsum.photos/800/300?random=1" },
        { avatar: "https://picsum.photos/800/300?random=2" },
        { avatar: "https://picsum.photos/800/300?random=3" }
      ]
    };
  },
  computed: {
    filteredSingers() {
      return this.singers.filter((singer) => {
        // 地区筛选
        const areaMatch =
            this.areaFilter === "all" ||
            (this.areaFilter === "cn" && singer.area === "cn") ||
            (this.areaFilter === "hkTw" && (singer.area === "hk" || singer.area === "tw")) ||
            (this.areaFilter === "us" && singer.area === "us") ||
            (this.areaFilter === "jp" && singer.area === "jp") ||
            (this.areaFilter === "kr" && singer.area === "kr");

        // 性别/组合筛选
        const genderMatch =
            this.genderFilter === "all" ||
            (this.genderFilter === "male" && singer.gender === "male") ||
            (this.genderFilter === "female" && singer.gender === "female") ||
            (this.genderFilter === "group" && singer.gender === "group");

        // 风格筛选
        const styleMatch =
            this.styleFilter === "all" ||
            singer.style.includes(this.styleFilter);

        return areaMatch && genderMatch && styleMatch;
      });
    }
  },
  methods: {
    handleFilterChange() {
      // 可在此处添加筛选变化时的额外逻辑（如重新请求接口）
    }
  }
};
</script>

<style scoped>
.singer-container {
  padding: 20px;
}

.carousel-wrapper {
  margin-bottom: 20px;
  border-radius: 10px; /* 设置轮播图的圆角 */
  overflow: hidden; /* 确保图片也遵循圆角 */
}

/* 新增按钮容器样式 */
.action-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.welcome-btn {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
  transition: all 0.3s ease;
}

.welcome-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 117, 252, 0.4);
}

.welcome-btn i {
  margin-right: 8px;
  font-size: 18px;
}

.filter-tabs {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.filter-tabs .el-radio-group {
  margin-bottom: 16px;
}

.filter-tabs .ml-3,
.filter-tabs .ml-4 {
  margin-left: 0;
  margin-top: 0;
}

.singer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.singer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.singer-item:hover {
  transform: translateY(-5px);
}

.singer-name {
  margin-top: 8px;
  font-size: 14px;
}

.ml-4 {
  margin-left: 16px;
}

/* 弹窗样式 */
.welcome-dialog .el-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.welcome-dialog .el-dialog__header {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  margin: 0;
  padding: 15px 20px;
}

.welcome-dialog .el-dialog__title {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.dialog-content {
  padding: 20px;
  text-align: center;
}

.dialog-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.dialog-icon i {
  font-size: 40px;
  color: white;
}

.dialog-content h3 {
  color: #2d3748;
  margin-bottom: 15px;
  font-size: 22px;
}

.dialog-content p {
  color: #718096;
  margin-bottom: 10px;
  line-height: 1.6;
}

.features {
  margin-top: 25px;
  text-align: left;
  padding: 15px;
  background-color: #f8f9fe;
  border-radius: 8px;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.feature-item i {
  font-size: 20px;
  color: #6a11cb;
  margin-right: 15px;
  min-width: 30px;
}

.feature-item span {
  color: #2d3748;
  font-size: 15px;
}

.welcome-dialog .el-dialog__footer {
  text-align: center;
  padding-bottom: 25px;
}

.welcome-dialog .el-button {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 30px;
  padding: 10px 35px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  transition: all 0.3s;
}

.welcome-dialog .el-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(37, 117, 252, 0.4);
}
</style>